<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Using API to Customize Dialog Windows &mdash; CKEditor Sample</title>
	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
	<script type="text/javascript"
        src='/CKEditorTest/dwr/interface/ExciseLawAjax.js'> 
</script>
<script type="text/javascript"
        src='/CKEditorTest/dwr/engine.js'> 
</script>
<script type="text/javascript"
        src='/CKEditorTest/dwr/util.js'>
</script>
<script>
function callAjax(){
	var textValue=document.getElementById('aoee').value;
	//var textValue = this.getContentElement( 'tab1', 'input1' );
	ExciseLawAjax.test(textValue,{
		 callback:function(dataFromServer){
             if(dataFromServer!=null && dataFromServer.length>0){
				 alert(dataFromServer)
				 document.getElementById('myDiv').innerHTML=dataFromServer;
             }
		 }
	});
}
</script> 
	<script type="text/javascript" src="../ckeditor.js"></script>
	<script src="sample.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css" />
	<style id="styles" type="text/css">

		.cke_button_myDialogCmd .cke_icon
		{
			display: none !important;
		}

		.cke_button_myDialogCmd .cke_label
		{
			display: inline !important;
		}

	</style>
	<script type="text/javascript">
	//<![CDATA[

// When opening a dialog, its "definition" is created for it, for
// each editor instance. The "dialogDefinition" event is then
// fired. We should use this event to make customizations to the
// definition of existing dialogs.
CKEDITOR.on( 'dialogDefinition', function( ev )
	{
		// Take the dialog name and its definition from the event
		// data.
		var dialogName = ev.data.name;
		var dialogDefinition = ev.data.definition;

		// Check if the definition is from the dialog we're
		// interested on (the "Link" dialog).
		//alert(dialogName)
		if ( dialogName == 'link' )
		{
			// Get a reference to the "Link Info" tab.
			var infoTab = dialogDefinition.getContents( 'info' );

			// Add a text field to the "info" tab.
			infoTab.add( {
					type : 'text',
					label : 'My Custom Field',
					id : 'customField',
					'default' : 'Sample!',
					validate : function()
					{
 //alert(this.getValue());
						if ( /\d/.test( this.getValue() ) )
							return 'My Custom Field must not contain digits';
					}
				});

			// Remove the "Link Type" combo and the "Browser
			// Server" button from the "info" tab.
			infoTab.remove( 'linkType' );
			infoTab.remove( 'browse' );

			// Set the default value for the URL field.
			var urlField = infoTab.get( 'url' );
			urlField['default'] = 'www.example.com';

			// Remove the "Target" tab from the "Link" dialog.
			dialogDefinition.removeContents( 'target' );

			// Add a new tab to the "Link" dialog.
			dialogDefinition.addContents({
				id : 'customTab',
				label : 'My Tab',
				accessKey : 'M',
				elements : [
					{
						id : 'myField1',
						type : 'text',
						label : 'My Text Field'
					},
					{
						id : 'myField2',
						type : 'text',
						label : 'Another Text Field'
					}
				]
			});

			// Rewrite the 'onFocus' handler to always focus 'url' field.
			dialogDefinition.onFocus = function()
			{
				var urlField = this.getContentElement( 'info', 'url' );
				urlField.select();
			};
		}
		else if ( dialogName == 'myDialog' )
		{
			dialogDefinition.onFocus = function()
			{
			//	var aoe = this.getContentElement( 'tab1', 'input1' );
 			//	alert("xxx="+aoe.value)
			};
		}
	});

	//]]>
	</script>

</head>
<body>
	<h1 class="samples">
		CKEditor Sample &mdash; Using CKEditor Dialog API
	</h1>
	<div class="description">
	</div>
	<textarea cols="80" id="editor1" name="editor1" rows="10">
	&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using 	 &lt;span id="aoe_12" &gt;xxx&lt;/span&gt; 
	 .&lt;/p&gt;
	
	</textarea>
	<script type="text/javascript">
		//<![CDATA[
			// Replace the <textarea id="editor1"> with an CKEditor instance.
			
			var editor = CKEDITOR.replace( 'editor1',
				{
					// Defines a simpler toolbar to be used in this sample.
					// Note that we have added out "MyButton" button here.
					toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'Unlink' ,'-', 'MyButton'] ]
				//toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'Unlink' ] ]
					//toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-', 'MyButton' ] ]
				});

			// Listen for the "pluginsLoaded" event, so we are sure that the
			// "dialog" plugin has been loaded and we are able to do our
			var getSelectedSpan = function( editor )
				{
					try
					{
						var selection = editor.getSelection();
						if ( selection.getType() == CKEDITOR.SELECTION_ELEMENT )
						{
							var selectedElement = selection.getSelectedElement();
							if ( selectedElement.is( 'span' ) )
								return selectedElement;
						}

						var range = selection.getRanges( true )[ 0 ];
						range.shrink( CKEDITOR.SHRINK_TEXT );
						var root = range.getCommonAncestor();
						return root.getAscendant( 'span', true );
					}
					catch( e ) { return null; }
				}	
			// customizations.
			editor.on( 'pluginsLoaded', function( ev )
				{
				var href2 = document.location.href.split( '/' );
				
				href2.pop();
				href2.push( 'api_dialog', 'my_dialog.js' );
				href2 = href2.join( '/' );
				alert('href2='+href2)
					// If our custom dialog has not been registered, do that now.
					if ( !CKEDITOR.dialog.exists( 'myDialog' ) )
					{
						// We need to do the following trick to find out the dialog
						// definition file URL path. In the real world, you would simply
						// point to an absolute path directly, like "/mydir/mydialog.js".
						var href = document.location.href.split( '/' );
						
						href.pop();
						href.push( 'api_dialog', 'my_dialog.js' );
						//href.push( 'api_dialog', 'excieslaw_unlink.js' );
						href = href.join( '/' );
						//alert('url=');
						// Finally, register the dialog.
						CKEDITOR.dialog.add( 'myDialog', href );
					}

					// Register the command used to open the dialog.
					editor.addCommand( 'myDialogCmd',new CKEDITOR.dialogCommand( 'myDialog' ) );
					/*		
					{
					    		exec : function( editor )
					    		{
					    			new CKEDITOR.dialogCommand( 'myDialog' );
					    		}
					    	//	startDisabled : true     // Command is available in wysiwyg mode only.
					});
			        */
					//new CKEDITOR.dialogCommand( 'myDialog' ) );

					// Add the a custom toolbar buttons, which fires the above
					// command..
					editor.ui.addButton( 'MyButton',
						{
							label : 'My Dialog',
							command : 'myDialogCmd'
						} );
					/*
					editor.dataProcessor.htmlFilter.addRules(
						    {
						        elements :
						        {
						            span: function( element )
						            {
						            	//alert("chatchai")						            	
						               // if ( !element.attributes.alt )
						                 //   element.attributes.alt = 'An image';
						            }
						        }
						   });
					*/
			//		CKEDITOR.dialogCommand( 'myDialogCmd' ).startDisabled=true;
					
				}); 
				/*
				
				*/
				editor.on( 'doubleclick', function( evt )
						{
							//alert("aoe doubleclick")
							var element =getSelectedSpan( editor ) || evt.data.element;
							/*
							var element;
							try
							{
								var selection = editor.getSelection();
								alert(selection.getType())
								if ( selection.getType() == CKEDITOR.SELECTION_ELEMENT )
								{
									alert("CKEDITOR.SELECTION_ELEMENT")
									var selectedElement = selection.getSelectedElement();
									if ( selectedElement.is( 'span' ) ){
										element = selectedElement;
										alert("xxxx")
									} 
								}

								var range = selection.getRanges( true )[ 0 ];
								range.shrink( CKEDITOR.SHRINK_TEXT );
								var root = range.getCommonAncestor();
								element =root.getAscendant( 'span', true );
							}
							catch( e ) {
								//return null;
								}
							*/
							//alert(element)
							//getSelectedSpan( editor ) || evt.data.element;
							
				if ( !element.isReadOnly() )
				{
					if ( element.is( 'span' ) ){
						evt.data.dialog = 'myDialog';
					}
					 
				}
			    });
				editor.on( 'selectionChange', function( evt )
						{
					var command = editor.getCommand( 'myDialogCmd' ),
					element = evt.data.path.lastElement && evt.data.path.lastElement.getAscendant( 'span', true );
				/*
				if ( element && element.getName() == 'span' )
					command.setState( CKEDITOR.TRISTATE_OFF );
				else
					command.setState( CKEDITOR.TRISTATE_DISABLED );
				*/
						} );
			
		//]]>
	</script>
	<div id="footer">
		<hr />
		<p>
			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
			<input type="button" value="click" onclick="callAjax()"/>
		</p>
		<p id="copy">
			Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
			Knabben. All rights reserved.
		</p>
	</div>
</body>
</html>
